<template>
  <div style="display: flex">
    <el-container>
      <el-header>
        <div class="report_header" ref="headerHeight">
          <div class="report_header_left"></div>
          <div style="width: 300px;display: flex;align-items: center;margin-left: 10px;">
            <svg-icon class="primary" :icon-class="$route.meta.icon"/>
            <span style="margin-left: 5px;" class="primary">{{$route.meta.title}}</span>
          </div>
          <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
            <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">
              <div class="report_header_query">
                <el-select v-model="query.status" clearable placeholder="请选择状态">
                                    <el-option label="待审核" :value="0"></el-option>
                                    <el-option label="已审核" :value="1"></el-option>
<!--                  <el-option label="进行中" :value="1"></el-option>-->
                  <el-option label="已完成" :value="2"></el-option>
                                    <el-option label="已取消" :value="3"></el-option>
                </el-select>
              </div>
              <div class="report_header_date">
                <el-date-picker
                  style="width: 100%;"
                  v-model="query.date"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </div>
            </div>
            <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryClick">查询</el-button>
            <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick"
              v-permission="['groupBuy.add']">新增</el-button>
          </div>
        </div>
      </el-header>
      <div class="pd10">
        <el-table
          :data="groupBuys"
          border
          stripe
          :height="curHeight"
          v-loadMore="[payLoads,'groupBuy-list']"

          ref="table"
          style="width: 100%;">
          <el-table-column
            type="index"
            width="50"
            align="center"
            fixed
          >
          </el-table-column>
          <el-table-column
            label="名称"
            align="left"
            prop="name"
            min-width="250"
          >
          </el-table-column>
<!--          <el-table-column-->
<!--            label="是否在前台显示"-->
<!--            align="center"-->
<!--            prop="isShow"-->
<!--            width="150"-->
<!--          >-->
<!--            <template slot-scope="{row}">-->
<!--              <span v-if="row.isShow" style="margin-left: 10px">是</span>-->
<!--              <span v-else style="margin-left: 10px">否</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column
            label="团购价"
            align="center"
            prop="price"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="beginDate"
            label="开始时间"
            sortable="custom"
            width="170">
            <template slot-scope="{row}">
              <span style="margin-left: 10px">{{row.beginDate | datetimeFormatter}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="endDate"
            label="结束时间"
            sortable="custom"
            width="170">
            <template slot-scope="{row}">
              <span style="margin-left: 10px">{{row.endDate | datetimeFormatter}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="功能"
            width="180"
            fixed="right"
            align="center"

          >
            <template slot-scope="scope">
              <el-button v-permission="['groupBuy.audit']" v-if="scope.row.status == 0"
                         @click="releaseProduct(scope.row)" type="primary" size="mini">上架</el-button>
              <el-button v-permission="['groupBuy.audit']" v-if="scope.row.status == 1"
                         @click="unAuditClick(scope.row)" type="danger" size="mini">下架</el-button>
              <el-button  @click="toDo(scope.row)"  type="primary" size="mini">详情</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="80" align="center">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" v-permission="['groupBuy.edit']" content="编辑" placement="top-start">
                <a @click="editClick(scope.row)">
                  <i style="color: #409EFF" class="el-icon-edit"></i>
                </a>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" v-permission="['groupBuy.del']" content="删除" placement="top-start">
                <a style="margin-left: 10px" @click="deleteGroupBuy(scope.row)">
                  <i style="color: #F56C6C" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-footer class="el-footerBox">
        <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                    @pagination="loadGroupBuy"  ></pagination>
      </el-footer>

    </el-container>

  </div>
</template>

<script>
  import Pagination from '@/components/Pagination';
  import loadMore from '@/utils/loadMore.js'
  import permission from '@/directive/permission/index.js'// 权限判断指令
  import { list, del, update, updateGroupBuy, unAudit, audit } from '@/api/groupBuy'
  import { EventBus } from '@/api/eventBus'
  import utils from '../../utils/utils.js'
  export default {
    name: 'sevengroupBuy-list',
    data(){
      return{
        pickerOptions: {//时间快捷选择
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        pageSize:20,
        total:0,
        curHeight: null,
        groupBuys:[],
        pageNum:1,
        payLoads:'',
        queryType: true,
        query: {
          date:[],
          status:''
        },
        keyword: {
          date:[],
          status:''
        },
      }
    },
    filters:{
      watchType(val){
        if (val==0){
          return'超值拼团'
        }else{
          return '红包拼团'
        }
      }
    },
    directives: {permission,loadMore},
    activated() {
      this.payLoads = new Date().getTime();
    },
    created() {
      EventBus.$on("sevengroupBuy-add", res => {
        this.groupBuys.splice(0, 0, res);
        this.loadGroupBuy()
      });
      EventBus.$on("sevengroupBuy-edit", res => {
        // 监听新增完毕
        // 更新列表数组
        for (var i = 0; i < this.groupBuys.length; i++) {
          if (this.groupBuys[i].id == res.id) {
            this.$set(this.groupBuys, i, res);
          }
        }
      });
      this.loadGroupBuy()
    },
    mounted() {
      this.comeIn()
      this.beforeMount()
    },
    components:{Pagination},
    methods:{
      releaseProduct(data){
        var product={
          id:data.id,

        }
        this.$confirm('确认上架', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          audit(product).then(res=>{
            this.loadGroupBuy()
          })
        })
      },
      unAuditClick(data){
        var product={
          id:data.id,

        }
        this.$confirm('确认下架', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          unAudit(product).then(res=>{
            this.loadGroupBuy()
          })
        })
      },
      toDo(data){
        this.$router.push({
          path: '/sevengroupBuy/view', query: {id: data.id}
        })
      },
      deleteGroupBuy(data){
        var _this=this
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(data.id).then(res=>{
            this.groupBuys.forEach(function (item, index) {
              if (item.id === data.id) {
                _this.groupBuys.splice(index, 1)
              }
            });
          })
        })

      },
      loadGroupBuy(){
        if(utils.isNull(this.keyword.date)){
          this.keyword.date = []
        }
        let param=new URLSearchParams()
        param.append('pageSize',this.pageSize)
        param.append('pageNum',this.pageNum)
        param.append('status',this.keyword.status)
        param.append('type',2)
        if (this.keyword.date.length>0){
          param.append('startDate',this.keyword.date[0])
          param.append('endDate',this.keyword.date[1])
        }

        list(param).then(res=>{
          this.groupBuys=res.data.data
          this.total=res.data.total
        })
      },
      editClick(data){
        this.$router.push({
          path: '/sevengroupBuy/edit', query: {id: data.id}
        })
      },

      resetClick() {
        this.query.date=[]
        this.query.status = '';
        this.keyword = this.query;
        this.pageNum = 1;
        this.loadGroupBuy()
      },
      queryClick() {
        this.keyword = this.query;
        this.pageNum = 1
        this.loadGroupBuy()
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 266//减去页面上固定高度height
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 220//减去页面上固定高度height
            }
          })();
        };
      },
      chooseClick() {
        this.queryType = !this.queryType
        if (this.queryType == false) {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 266//减去页面上固定高度height
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 220//减去页面上固定高度height
        }
      },
      comeIn(){
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 220//减去页面上固定高度height
      },
      addClick() {
        this.$router.push({
          path: '/sevengroupBuy/add'
        })
      },
    }
  }
</script>

<style scoped>
.app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }
  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }
  .report_header_date {
      margin-left: 10px;
      width: 250px;
      margin-top: 5px;
    }
</style>
